<template>
  <div class="role-list-container">
    <div class="role">
      <div class="role-header">
        <div class="header-title">角色设置</div>
        <el-button
          size="small"
          type="primary"
          v-if="userGuardList.includes(guard.RoleManage)"
          @click="showAdd"
        >
          <svg-icon icon-class="add"></svg-icon> 新建
        </el-button>
      </div>
      <div class="role-setting-point">
        <el-table
          size="small"
          :data="tableData"
          stripe
          border
          class="role-table"
          highlight-current-row
          :current-row-key="selectedRoleUuid"
          @current-change="onCurrentChange"
        >
          <el-table-column
            prop="name"
            label="角色名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="角色描述"
            align="center"
          ></el-table-column>
          <el-table-column
            label="权限"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                el-icon-key
                type="text"
                size="small"
                @click="getRoleGuardList(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template
              slot-scope="scope"
              v-if="userGuardList.includes(guard.RoleManage)"
            >
              <el-button
                type="text"
                icon="el-icon-edit"
                size="small"
                @click="editRole(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                size="small"
                @click="deleteRole(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <user-list
      ref="userListComponent"
      :role="selectedRole"
    ></user-list>
    <add
      ref="addComponent"
      @refresh="search"
    ></add>
    <edit
      ref="editComponent"
      @refresh="search"
    ></edit>
  </div>
</template>

<script>
import Add from './add';
import Edit from './edit';
import UserList from './userList';
import { deleteRoleApi, getRoleListApi } from '../../../api/role';
import { parseError } from '../../../utils';
import { MessageBox, Message } from 'element-ui';

export default {
  components: { Add, Edit, UserList },
  data() {
    return {
      addShow: false,
      tableData: [],
      selectedRole: {}
    };
  },
  created() {
    this.search();
  },
  methods: {
    showAdd() {
      this.$refs.addComponent.showDialog();
    },
    search() {
      getRoleListApi()
        .then(res => {
          this.tableData = res;
          this.tableData.forEach(item => {
            item.guardList = item.guard_list.map(guard => guard.name).join(',');
          });
          if (this.tableData.length) {
            this.selectedRole = this.tableData[0];
            this.$nextTick(() => this.$refs.userListComponent.search());
          }
        })
        .catch(error => Message.error(parseError(error)));
    },
    editRole(row) {
      this.$refs.editComponent.showDialog(row);
    },
    deleteRole(row) {
      MessageBox.confirm(`确认删除${row.name}吗？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() =>
          deleteRoleApi(row.uuid)
            .then(res => {
              if (res.result) Message.success('删除角色成功');
            })
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.search())
        )
        .catch(() => {});
    },
    getRoleGuardList(row) {
      const guardRoute = this.$router.resolve({ name: 'roleGuard', query: { uuid: row.uuid } });
      window.open(guardRoute.href, '_blank');
    },
    onCurrentChange(newCurrent, oldCurrent) {
      this.selectedRole = newCurrent || this.tableData[0];
      this.$nextTick(() => this.$refs.userListComponent.search());
    }
  }
};
</script>

<style lang="scss" scoped>
.role-list-container {
  .role-setting-point {
    cursor: pointer;
  }
  padding: 10px;
  display: flex;
  .role {
    &-header {
      font-size: 24px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 500px;
      margin: 10px 10px 20px 10px;
    }
    .user {
      width: 800px;
    }
  }
  .button {
    margin-bottom: 20px;
  }
  .el-button--primary {
    background-color: #2c83b1 !important;
    border-color: #2c83b1 !important;
  }
}
</style>
